<template>
  <a-form-model-item
    :label="label"
    :prop="name ? name : prop"
    :rules="rules"
    :labelCol="labelCol"
    :wrapperCol="wrapperCol"
  >
    <a-input
      class="readonlyInput"
      v-if="readonly"
      v-model="value"
      :placeholder="placeholder"
      disabled
      :suffix="suffix"
    >
    </a-input>
    <a-input-number
      v-else
      v-model="value"
      :placeholder="placeholder"
      :max="max"
      :min="min"
      :step="step"
      :precision="precision"
      :disabled="disabled"
      :formatter="fnFormatter"
      :parser="fnParser"
      style="width: 100%;"
      @change="handleChange"
    >
    </a-input-number>
  </a-form-model-item>
</template>

<script>
export default {
  name: 'ResealInputNumber',
  props: {
    // 绑定的对象
    form: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 绑定对象的属性
    prop: {
      type: String,
      default: 'attribute'
    },
    // 循环中使用的检验值
    name: {
      type: String,
      default: ''
    },
    // 循环中使用的检验规则
    rules: {
      type: Object,
      default: () => {
        return null;
      }
    },
    // label格数
    labelCol: {
      type: Object,
      default: () => {
        return null;
      }
    },
    // input格数
    wrapperCol: {
      type: Object,
      default: () => {
        return null;
      }
    },
    // 文字
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    // 最大值
    max: {
      type: Number,
      default: Infinity
    },
    // 最小值
    min: {
      type: Number,
      default: -99999999999
    },
    step: {
      type: Number,
      default: 1
    },
    // 小数点后位数
    precision: {
      type: Number,
      default: 0
    },
    // 禁止操作
    disabled: {
      type: Boolean,
      default: false
    },
    // 只读
    readonly: {
      type: Boolean,
      default: false
    },
    // 输入框前部内容 未开发
    // prefix: {
    //   type: String,
    //   default: ''
    // },
    // 输入框后部内容
    suffix: {
      type: String,
      default: ''
    }
  },
  computed: {
    parentData: function() {
      const arr = this.prop.split('.');
      const key = arr[arr.length - 1];
      // console.log(this.analysisAttribute(this.form)[key])
      return this.analysisAttribute(this.form)[key];
    }
  },
  watch: {
    parentData: {
      handler: function(n) {
        this.value = n;
        // console.log(this.value)
      },
      immediate: true
    }
  },
  data() {
    return {
      value: undefined
    };
  },
  methods: {
    fnFormatter(value) {
      //  let newValue = value.toString().replace(/[^\d^\.]+/g,'');
      //  return `${newValue}` +this.suffix;
      return `${value}` + this.suffix;
    },
    fnParser(value) {
      if (this.suffix) {
        value = value.replace(this.suffix, '');
      }
      return value;
    },
    handleChange(e) {
      // let newValue = e.toString().replace(/[^\d^\.]+/g,'')
      this.$emit('change', e);
      this.analysisAttribute(this.form, e);
      this.$forceUpdate();
    },
    /**
     * [analysisAttribute 根据字符串获取末级对象]
     * @param  {[type]} object [读取的对象]
     * @param  {[type]} val    [末级对象的具体属性赋值val（空值输出末级对象）]
     * @return {[type]}        [description]
     */
    analysisAttribute(object, val) {
      var arr = this.prop.split('.');
      let index = 0;
      const length = arr.length;
      while (object != null && index < length - 1) {
        object = object[arr[index]];
        index++;
      }
      if (val || val === 0 || val === '') {
        if (length !== 1) {
          index++;
        }
        // object[arr[index]] = val;
        this.$set(object, arr[index], val);
      } else {
        return object;
      }
    }
  }
};
</script>
<style>
  .readonlyInput .ant-input[disabled]{
    background-color:#fff;color: rgba(0, 0, 0, 0.65);cursor: auto;
  }
</style>
